<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>fixed</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.fix {
				width: 200px;
				height: 200px;
				background-color: red;

				/* 固定定位 */
				/* 会使元素脱离文档流(元素在页面中所占的位置) */
				/*
					相对于浏览器窗口进行定位, 不随着页面的滚动而滚动

				*/
				position: fixed;

				/*left: 0;*/
				/*right: 0;*/
				/*top: 100px;*/
				/*bottom: 0;*/
			}

			.blue {
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			
			a {
				position: fixed;
				width: 50px;
				height: 50px;
				background: black;
				color: white;
				text-align: center;
				line-height: 50px;
				border-radius: 25px;
				right: 100px;
				bottom: 100px;
			}

		</style>
	</head>
	<body>

		<div class="fix"></div>
		<div class="blue"></div>
		<a href="#">顶部</a>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<div class="blue"></div>
		
	</body>
</html>